<template>
  <div class="cool-dialog-overlay" v-if="modelValue" @click.self="handleClose">
    <div
      class="cool-dialog-wrapper"
      :class="{ 'is-visible': modelValue, 'over-hidden': !overHidden }"
    >
      <div class="cool-dialog">
        <div class="cool-dialog-header">
          <h3 class="cool-dialog-title warning" v-if="type === 'warning'">
            <div class="iconfont icon-jinggao1"></div>
            <div>{{ title }}</div>
          </h3>
          <h3 class="cool-dialog-title info" v-if="type === 'info'">
            <div class="iconfont icon-tishi"></div>
            <div>{{ title }}</div>
          </h3>
          <h3 class="cool-dialog-title success" v-if="type === 'success'">
            <div class="iconfont icon-gouxuan"></div>
            <div>{{ title }}</div>
          </h3>
          <h3 class="cool-dialog-title error" v-if="type === 'error'">
            <div class="iconfont icon-shibai"></div>
            <div>{{ title }}</div>
          </h3>
          <button class="cool-dialog-close" @click="handleClose">
            <span class="iconfont icon-guanbi"></span>
          </button>
        </div>
        <div
          class="cool-dialog-body"
          :style="{ overflowY: disBodyAuto ? 'visible' : 'auto' }"
        >
          <slot></slot>
        </div>
        <div class="" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
        <div class="cool-dialog-footer" v-else-if="!hiddenFooter">
          <button class="cool-button cool-button-cancel" @click="handleClose">
            {{ cancelButtonText }}
          </button>
          <button
            class="cool-button cool-button-confirm"
            @click="handleConfirm"
          >
            {{ confirmButtonText }}
          </button>
        </div>
        <div class="cool-dialog-decoration top-left"></div>
        <div class="cool-dialog-decoration top-right"></div>
        <div class="cool-dialog-decoration bottom-left"></div>
        <div class="cool-dialog-decoration bottom-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CoolDialog",
  props: {
    maxHeight: {
      type: String,
      default: "60vh",
    },
    disBodyAuto: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "warning",
    },
    overHidden: {
      type: Boolean,
      default: false,
    },
    hiddenFooter: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "500px",
    },
    confirmButtonText: {
      type: String,
      default: "确认",
    },
    cancelButtonText: {
      type: String,
      default: "取消",
    },
    title: {
      type: String,
      default: "对话框",
    },
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:modelValue", "confirm", "cancel"],
  methods: {
    handleClose () {
      if (this.closeOnClickModal) {
        this.$emit("update:modelValue", false);
        this.$emit("cancel");
      }
    },
    handleConfirm () {
      this.$emit("confirm");
    },
  },
  mounted () {
    window.addEventListener("keydown", (e) => {
      if (e.keyCode == 27) {
        this.handleClose();
      }
    });
  },
};
</script>

<style scoped lang="less">
.cool-dialog-wrapper {
  width: v-bind(width);
}
.over-hidden {
  overflow: hidden;
  border-radius: 15px;
}
.cool-dialog-body {
  max-height: v-bind(maxHeight);
}
</style>
